<p>This rule flags the use of the <code>outputs</code> metadata property in <code>@Component</code> and <code>@Directive</code> decorators.</p>
<h2>Why is this an issue?</h2>
<p>Using the <code>outputs</code> metadata property makes code harder to read and maintain compared to the <code>@Output()</code> decorator
approach.</p>
<p>The <code>@Output()</code> decorator provides several advantages:</p>
<ul>
  <li> <strong>Better readability</strong>: Output properties are declared directly on class members </li>
  <li> <strong>Type safety</strong>: TypeScript can better validate output types </li>
  <li> <strong>IDE support</strong>: Better autocomplete and refactoring capabilities </li>
  <li> <strong>Consistency</strong>: Follows Angular’s recommended patterns </li>
</ul>
<p>The Angular style guide specifically recommends avoiding the <code>outputs</code> metadata property in favor of the decorator approach.</p>
<h3>What is the potential impact?</h3>
<p>Using the <code>outputs</code> metadata property reduces code maintainability and readability. It makes it harder for developers to understand
component interfaces and can lead to runtime errors that could be caught at compile time with proper typing.</p>
<h3>How to fix in Angular?</h3>
<p>Replace the <code>outputs</code> metadata property with <code>@Output()</code> decorators on class members.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
@Component({
  outputs: ['valueChange'], // Noncompliant
  selector: 'app-counter'
})
class Counter {
  valueChange = new EventEmitter&lt;number&gt;();
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
@Component({
  selector: 'app-counter'
})
class Counter {
  @Output() valueChange = new EventEmitter&lt;number&gt;();
}
</pre>
<p>For aliased outputs, use the alias parameter in the <code>@Output()</code> decorator.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="2" data-diff-type="noncompliant">
@Component({
  outputs: ['valueChange: onChange'], // Noncompliant
  selector: 'app-counter'
})
class Counter {
  valueChange = new EventEmitter&lt;number&gt;();
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="2" data-diff-type="compliant">
@Component({
  selector: 'app-counter'
})
class Counter {
  @Output('onChange') valueChange = new EventEmitter&lt;number&gt;();
}
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/angular-eslint/angular-eslint">Angular ESLint</a> - Rule <a
  href="https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/no-outputs-metadata-property.md">no-outputs-metadata-property</a> </li>
  <li> Angular Style Guide - Decorate input and output properties - <a href="https://angular.dev/style-guide#style-05-12">Official Angular style guide
  recommendation to use decorators instead of metadata properties</a> </li>
  <li> Angular Output Decorator - <a href="https://angular.dev/api/core/Output">Official documentation for the @Output() decorator</a> </li>
</ul>
